<template>
  <div class="goods">
    <div class="goods_header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="goods_list_box">
      <div class="goods_list_box_box">
        <div class="goods_list_box_search">
          <el-input
            placeholder="请输入内容"
            clearable
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-button
            type="primary"
            class="add_good"
            @click="$router.push('/goods/add')"
            >添加商品</el-button
          >
        </div>
        <div class="good_list_box_body">
          <el-table :data="goodsdata" border style="width: 100%">
            <el-table-column prop="index" label="#" width="40">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="goods_name" label="名称" width="550">
            </el-table-column>
            <el-table-column prop="goods_price" label="价格(元)" width="180">
            </el-table-column>
            <el-table-column prop="goods_weight" label="重量(kg)" width="180">
            </el-table-column>
            <el-table-column prop="add_time" label="时间" width="180">
              <template slot-scope="scope">
                {{ seTtime(scope.row.add_time * 1000) }}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit"></el-button>
                <el-button type="danger" icon="el-icon-delete"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoods } from "@/api/wares.js";
export default {
  data() {
    return {
      goodsdata: [],
    };
  },
  mounted() {
    this.getGoodsdata(); //获取  商品 列表 数据
  },
  methods: {
    //获取  商品 列表 数据
    getGoodsdata() {
      getGoods({
        query: "",
        pagenum: 1,
        pagesize: 3,
      }).then((res) => {
        this.goodsdata = res.data.goods;
        console.log(res.data.goods);
      });
    },
    seTtime(time) {
      let dTime = new Date(time);
      let yea = dTime.getFullYear();
      let mon = dTime.getMonth() + 1; //注意月份要加1
      let dat = dTime.getDate();
      let hou = dTime.getHours();
      let min = dTime.getMinutes();
      let sec = dTime.getSeconds();
      return `${yea}-${mon < 9 ? "0" + mon : mon}-${
        dat < 9 ? "0" + dat : dat
      } ${hou < 9 ? "0" + hou : hou}:${min < 9 ? "0" + min : min}:${
        sec < 9 ? "0" + sec : sec
      }`;
    },
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.goods {
  width: 100%;
  height: 100%;
  background: #eee;
  .goods_header {
    width: 100%;
    height: 80px;
    padding-top: 30px;
    padding-left: 30px;
  }
  .goods_list_box {
    width: 100%;
    height: calc(100% - 80px);
    .goods_list_box_box {
      width: 95%;
      height: 100%;
      background: #fff;
      margin: 0 auto;
      .goods_list_box_search {
        width: 95%;
        height: 80px;
        margin: 0 auto;
        line-height: 80px;
        .input-with-select {
          width: 400px;
        }
        .add_good {
          margin-left: 20px;
        }
      }
      .good_list_box_body {
        width: 95%;
        height: calc(100% - 80px);
        margin: 0 auto;
      }
    }
  }
}
</style>
